<template>
	<view class="home_page">
		<view class="header-box">
			<Header>
				<template #header>
					<view class="header">
						<view class="left df-c">
							<view class="icon">
							</view>
							<text>任意推</text>
						</view>
						<view class="right df-c">
							<image src="@/static/home/search.png" mode="widthFix" class="icon"></image>
							<image src="@/static/home/notice.png" mode="widthFix" class="icon"></image>
						</view>
					</view>
				</template>
				<view class="bottom">
				</view>
			</Header>
			<Tabs :list="list" :activeKey="activeKey" />
		</view>
		<view class="main-box">
			<view class="page-sc">
				<view  v-for="(item, index) in data" :key="index" @click="taskInfos(index)">
					<uni-card spacing="20rpx">
						<template #title>
							<view class="card-header df-between">
								<view class="left df-c">
									<image src="@/static/home/circle.png" mode="widthFix" class="icon"></image>
									<text>{{item.name}}</text>
								</view>
								<view class="right">
									<text class="unit">￥</text>
									<text class="num">{{item.value}}</text>
								</view>
							</view>
							<view class="content-box">
								<view class="item" v-for="(v, i) in item.tags" :key="i">
									<text>{{v}}</text>
								</view>
							</view>
						</template>
						<view class="footer-box df-between">
							<view class="left df-l">
								<text>产品指数：</text>
								<uni-rate :value="item.val" :size="16" readonly activeColor="#F44242"></uni-rate>
							</view>
							<view class="right">
								<text>21547</text>
								<text>正在推广</text>
							</view>
						</view>
					</uni-card>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Header from '@/components/heder/index.vue'
	import {
		ref,
		onMounted
	} from 'vue'
	import Tabs from '@/components/tabs/index.vue'
	const list = ref([{
			label: '热门',
			value: 1
		},
		{
			label: '心上',
			value: 2
		},
		{
			label: '网盘',
			value: 3
		},
		{
			label: '小说短剧',
			value: 4
		},
		{
			label: '网推',
			value: 5
		}, {
			label: '其他',
			value: 6
		},
	])
	const activeKey = ref(2)

	const data = ref([{
			name: '夸克网盘',
			value: 7.00,
			tags: ['小说资源', '抖音快手', '各电商平台', '自媒体', '社群', '自有APP/网站'],
			val: 2
		},
		{
			name: '夸克网盘',
			value: 7.00,
			tags: ['小说资源', '抖音快手', '各电商平台', '自媒体', '社群', '自有APP/网站'],
			val: 2
		},
		{
			name: '夸克网盘',
			value: 7.00,
			tags: ['小说资源', '抖音快手', '各电商平台', '自媒体', '社群', '自有APP/网站'],
			val: 2
		}
	])
	const taskInfos = (index) => {
		console.log(index, 'index--');
		uni.navigateTo({
			url: '/pages/tabbar/index/task?id=' + index
		})
	}
</script>

<style lang="scss" scoped>
	.home_page {
		display: flex;
		flex-direction: column;
		flex: 1;

		.header-box {
			position: sticky;
			top: 0;

			.header {
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&>.left {
					font-weight: 400;
					font-size: 30rpx;
					color: #427DFF;

					&>.icon {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						background-color: #427DFF;
						margin-right: 12rpx;
					}
				}

				&>.right {
					&>.icon {
						width: 30rpx;
					}

					&>.icon:first-child {
						margin-right: 30rpx;
					}
				}
			}

			.bottom {
				height: 260rpx;
				background: url('@/static/home/banner.png') no-repeat;
				background-position: center;
				background-size: 100% 100%;
			}
		}

		.main-box {
			display: flex;
			flex-direction: column;
			position: absolute;
			top: 420rpx;
			overflow: hidden;

			.page-sc {
				height: calc(100vh - 268px);
				overflow-y: scroll;

				&::-webkit-scrollbar {
					width: 0;
				}

				.card-header {
					&>.left {
						color: #333333;
						font-size: 30rpx;
						font-weight: Bold;

						&>.icon {
							width: 50rpx;
							height: 50rpx;
							margin-right: 20rpx;
						}
					}

					&>.right {
						color: #F44242;
						font-size: 24rpx;
					}
				}

				.content-box {
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;
					color: #999999;
					font-size: 24rpx;
					margin: 20rpx 20rpx 12rpx 70rpx;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: -52rpx;
						bottom: -20rpx;
						width: 110%;
						height: 2rpx;
						background-color: #DDDDDD;
					}

					&>.item {
						background-color: #F5F7FB;
						border-radius: 8rpx;
						padding: 8rpx 12rpx;
						box-sizing: border-box;
						font-size: 24rpx;
					}
				}

				.footer-box {
					&>.right {
						color: #FF5100;
					}
				}
			}
		}
	}
</style>